﻿<div [@routerTransition]>
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>{{l("Tenants")}}</span> <small>{{l("TenantsHeaderInfo")}}</small>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button ng-if="vm.permissions.create" class="btn btn-primary blue" (click)="createTenant()"><i class="fa fa-plus"></i>{{l("CreateNewTenant")}}</button>
        </div>
    </div>
    <div class="portlet light margin-bottom-0">
        <div class="portlet-title portlet-title-filter">
            <div class="inputs inputs-full-width">
                <div class="portlet-input">
                    <form (submit)="getTenants()" autocomplete="off">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="TenantsTableFilter">{{l('TenantNameOrTenancyCode')}}</label>
                                        <div class="input-group">
                                            <input [(ngModel)]="filters.filterText" name="filterText" class="form-control" placeholder="{{l('SearchWithThreeDot')}}" type="text">
                                            <span class="input-group-btn">
                                                <button class="btn default" type="submit"><i class="icon-magnifier"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="EditionDropdown">{{l('Edition')}}</label>
                                    <edition-combo [(selectedEdition)]="filters.selectedEditionId"></edition-combo>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="md-checkbox-list">
                                            <div class="md-checkbox">

                                                <input class="md-check"
                                                       type="checkbox"
                                                       [(ngModel)]="filters.subscriptionEndDateRangeActive"
                                                       id="TenantsTable_SubscriptionEndDateRangeActive"
                                                       name="SubscriptionEndDateRangeActive"
                                                       value="true">

                                                <label for="TenantsTable_SubscriptionEndDateRangeActive">
                                                    <span class="inc"></span>
                                                    <span class="check"></span>
                                                    <span class="box"></span>
                                                    {{l('SubscriptionEndDate')}}
                                                </label>
                                            </div>
                                        </div>

                                        <date-range-picker name="SubscriptionEndDateRange"
                                                           [isDisabled]="!filters.subscriptionEndDateRangeActive"
                                                           [(startDate)]="filters.subscriptionEndDateStart"
                                                           [(endDate)]="filters.subscriptionEndDateEnd"
                                                           [allowFutureDate]="true">
                                        </date-range-picker>

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="md-checkbox-list">
                                            <div class="md-checkbox">
                                                <input class="md-check"
                                                       type="checkbox"
                                                       [(ngModel)]="filters.creationDateRangeActive"
                                                       id="TenantsTable_CreationDateRangeActive"
                                                       name="CreationDateRangeActive"
                                                       value="true">

                                                <label for="TenantsTable_CreationDateRangeActive">
                                                    <span class="inc"></span>
                                                    <span class="check"></span>
                                                    <span class="box"></span>
                                                    {{l('CreationTime')}}
                                                </label>
                                            </div>
                                        </div>

                                        <date-range-picker name="CreationDateRange"
                                                           [isDisabled]="!filters.creationDateRangeActive"
                                                           [(startDate)]="filters.creationDateStart"
                                                           [(endDate)]="filters.creationDateEnd"
                                                           [allowFutureDate]="false">
                                        </date-range-picker>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-12 text-right">
                                    <button name="RefreshButton" class="btn blue"><i class="fa fa-refresh"></i> {{l('Refresh')}}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <!--<Primeng-Datatable-Start>-->
            <div class="primeng-datatable-container" [busyIf]="primengDatatableHelper.isLoading">
                <p-dataTable #dataTable
                             (onLazyLoad)="getTenants($event)"
                             [value]="primengDatatableHelper.records"
                             rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}"
                             [paginator]="false"
                             [lazy]="true"
                             emptyMessage="{{l('NoData')}}"
                             [responsive]="primengDatatableHelper.isResponsive">

                    <p-column field="" [sortable]="false" header="{{l('Actions')}}" [style]="{'width':'10%','text-align':'center'}">
                        <ng-template let-record="rowData" pTemplate="body">
                            <div class="btn-group dropdown">
                                <button class="dropdown-toggle btn btn-xs btn-primary blue"
                                        data-toggle="dropdown"
                                        aria-haspopup="true"
                                        aria-expanded="false">
                                    <i class="fa fa-cog"></i><span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li [class.disabled]="!record.isActive">
                                        <a *ngIf="permission.isGranted('Pages.Tenants.Impersonation')"
                                           (click)="record.isActive && showUserImpersonateLookUpModal(record)">{{l('LoginAsThisTenant')}}</a>
                                    </li>
                                    <li>
                                        <a *ngIf="permission.isGranted('Pages.Tenants.Edit')"
                                           (click)="editTenantModal.show(record.id)">{{l('Edit')}}</a>
                                    </li>
                                    <li>
                                        <a *ngIf="permission.isGranted('Pages.Tenants.ChangeFeatures')"
                                           (click)="tenantFeaturesModal.show(record.id, record.name)">{{l('Features')}}</a>
                                    </li>
                                    <li>
                                        <a *ngIf="permission.isGranted('Pages.Tenants.Delete')"
                                           (click)="deleteTenant(record)">{{l('Delete')}}</a>
                                    </li>
                                    <li>
                                        <a (click)="unlockUser(record)">{{l('Unlock')}}</a>
                                    </li>
                                </ul>
                            </div>
                        </ng-template>
                    </p-column>
                    <p-column field="tenancyName" header="{{l('TenancyCodeName')}}" [sortable]="true">
                        <ng-template let-record="rowData" pTemplate="body">
                            <i *ngIf="record.connectionString" class="fa fa-database" title="{{l('HasOwnDatabase')}}"></i>
                            {{record.tenancyName}}
                        </ng-template>
                    </p-column>
                    <p-column field="name" header="{{l('Name')}}" [sortable]="true"></p-column>
                    <p-column field="editionDisplayName" header="{{l('Edition')}}" [sortable]="true"></p-column>
                    <p-column field="subscriptionEndDateUtc" header="{{l('SubscriptionEndDateUtc')}}" [sortable]="true">
                        <ng-template let-record="rowData" pTemplate="body">
                            {{ record.subscriptionEndDateUtc ? (record.subscriptionEndDateUtc | momentFormat:'L') : '-'}}
                        </ng-template>
                    </p-column>
                    <p-column field="isActive" header="{{l('Active')}}" [sortable]="true">
                        <ng-template let-record="rowData" pTemplate="body">
                            <span *ngIf="record.isActive" class="label label-success">{{l('Yes')}}</span>
                            <span *ngIf="!record.isActive" class="label label-default">{{l('No')}}</span>
                        </ng-template>
                    </p-column>
                    <p-column field="creationTime" header="{{l('CreationTime')}}" [sortable]="true">
                        <ng-template let-record="rowData" pTemplate="body">
                            {{record.creationTime | momentFormat:'L'}}
                        </ng-template>
                    </p-column>
                </p-dataTable>
                <div class="primeng-paging-container">
                    <p-paginator rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}"
                                 #paginator
                                 (onPageChange)="getTenants($event)"
                                 [totalRecords]="primengDatatableHelper.totalRecordsCount"
                                 [rowsPerPageOptions]="primengDatatableHelper.predefinedRecordsCountPerPage">
                    </p-paginator>
                    <span class="total-records-count">
                        {{l('TotalRecordsCount', primengDatatableHelper.totalRecordsCount)}}
                    </span>
                </div>
            </div>
            <!--<Primeng-Datatable-End>-->
        </div>
    </div>
    <createTenantModal #createTenantModal (modalSave)="getTenants()"></createTenantModal>
    <editTenantModal #editTenantModal (modalSave)="getTenants()"></editTenantModal>
    <tenantFeaturesModal #tenantFeaturesModal></tenantFeaturesModal>
    <commonLookupModal #impersonateUserLookupModal (itemSelected)="impersonateUser($event)"></commonLookupModal>
</div>
